<template>
  <div class="bd">
    <div class="title" v-if='gridDatas.title'>{{gridDatas.title}}</div>
    <div class="grid data-table" v-if='gridDatas.showSel'>
      <a-table :rowKey='record=>record.id' bordered='true' :columns="gridDatas.columns" :data-source="gridDatas.data" :pagination="gridDatas.pageData" @change="handleTableChange">
        <template #name="{ text,record }">
          <router-link :to="{name:'ManagementDtl',params:{id:record.id}}"><img style="width:12px;margin-right:5px;" v-if="record.inspectLevel === 'High'" src="@/assets/images/icon-important.png" />{{ text }}</router-link>
        </template>
        <template #offline="{ text }">
          <span class="offline">
            <a-tooltip title="存活" v-if="text === 'N'"><a-tag color="#87d068"></a-tag></a-tooltip>
            <a-tooltip title="未存活" v-else><a-tag color="#f50"></a-tag></a-tooltip>
          </span>
        </template>
        <template #tags="{ text }">
          <span>
            <a-tag color="#4687FF" v-if="text === 1">低危</a-tag>
            <a-tag color="#FFD966" v-else-if="text === 2">中危</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 3">高危</a-tag>
            <a-tag color="#FE4E50" v-else>严重</a-tag>
          </span>
        </template>
        <!-- 漏洞等级 -->
        <template #severity="{ text }">
          <span>
            <a-tag color="#4687FF" v-if="text === 'Low'">低危</a-tag>
            <a-tag color="#FFD966" v-else-if="text === 'Medium'">中危</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 'High'">高危</a-tag>
            <a-tag color="#FE4E50" v-else>严重</a-tag>
          </span>
        </template>
        <!-- 威胁类型 -->
        <template #vulnType="{ text }">
          <span>
            <a-tag v-if="text === 'Sys'">系统漏洞</a-tag>
            <a-tag v-else-if="text === 'App'">应用漏洞</a-tag>
            <a-tag v-else>漏洞</a-tag>
          </span>
        </template>
        <!-- 操作类型 -->
        <template #operType="{ text }">
          <span>
            <a-tag v-if="text === 'Create'">创建</a-tag>
            <a-tag v-else-if="text === 'Edit'">编辑</a-tag>
            <a-tag v-else-if="text === 'Delete'">删除</a-tag>
            <a-tag v-else-if="text === 'Login'">登录</a-tag>
            <a-tag v-else>其它</a-tag>
          </span>
        </template>
        <!-- 流程状态 -->
        <template #status="{ text }">
          <span>
            <a-tag v-if="text === 'UnReported'">未通报</a-tag>
            <a-tag v-else-if="text === 'Reported'">已通报</a-tag>
            <a-tag v-else-if="text === 'Handled'">已签收</a-tag>
            <a-tag v-else-if="text === 'Uploaded'">已反馈</a-tag>
            <a-tag v-else-if="text === 'Confirmed'">已完成</a-tag>
            <a-tag v-else>漏洞</a-tag>
          </span>
        </template>
        <!-- 格式時間 -->
        <template #time="{text}">
         {{base.getTime(text)}}
        </template>
        <!-- 檢測中心匹配單位狀態 -->
        <template #inspectionFirmName="{text}">
         <span v-if="text != null"> {{text}}</span>
         <span v-else> 未匹配 </span>
        </template>
        <!-- 创建通报 -->
        <template #isReportGenerated="{record}">
          <span v-if=" roleId == 1">
            <a-button type="primary" @click="createReport(record)" v-if="record.isReportGenerated === 'N' && record.vulnOfPendingCount > 0">生成整改通知书</a-button>
            <a-tag color="#9e9e9e" style="padding: 5px 16px;" v-else-if="record.isReportGenerated === 'Y'">已生成整改通知书</a-tag>
          </span>
        </template>
         <!-- 手动匹配單位狀態 -->
        <template #isFirmRelatedBtn="{ record }">
         <span v-if="text" v-on:click="getItem({record:record,eventName:'isFirmRelatedBtn'})"> 
           <a-tag color="#FC890C">解除绑定</a-tag>
         </span>
         <span v-else v-on:click="getItem({record:record,eventName:'isFirmRelatedBtn'})"> 
           <a-tag color="#4687FF">绑定企业</a-tag>
          </span>
        </template>
        <!-- 操作 -->
        <template #action="data">
          <span class="action" v-on:click="getTeg(data)">
            <svg focusable="false" style="color:#fff" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M396 512a112 112 0 10224 0 112 112 0 10-224 0zm546.2-25.8C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM508 688c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176z"></path></svg>
          </span>
        </template>
        <!-- 組件 -->
        <template #layers="{record}">
          <div v-for="(item,key) of JSON.parse(record['layer'])" :key='item'>
            <a-tag color="#4687FF" v-if="key === 'application'">应用层</a-tag>
            <a-tag color="#FFD966" v-else-if="key === 'service'">服务层</a-tag>
            <a-tag color="#77ff66" v-else-if="key === 'support'">支撑层</a-tag>
            <a-tag color="#f666ff" v-else-if="key === 'hardware'">硬件层</a-tag>
            <a-tag color="#ffa666" v-else>系统层</a-tag>
             <span v-for="(tool) of item" :key='tool'>
                {{tool.name}},
              </span>
            <!-- {{ data['record']['layer'] }} -->
            <!-- <div v-if="data['record']['layer']['application']">lee</div> -->
          </div>
        </template>
      </a-table>
    </div>
    <div class="grid data-table" v-else>
      <a-table :rowKey='record=>record.id' :columns="gridDatas.columns" :data-source="gridDatas.data" :pagination="gridDatas.pageData" @change="handleTableChange">
        <template #name="{ text,record }">
          <a><img v-if="record.inspectLevel === 'High'" src="@/assets/images/icon-important.png" />{{record.inspectLevel + " " + text }}</a>
        </template>
        <template #offline="{ text }">
          <span class="offline">
            <a-tooltip title="存活" v-if="text === 'N'"><a-tag color="#87d068"></a-tag></a-tooltip>
            <a-tooltip title="未存活" v-else><a-tag color="#f50"></a-tag></a-tooltip>
          </span>
        </template>
        <template #tags="{ text }">
          <span>
            <a-tag color="#4687FF" v-if="text === 1">低危</a-tag>
            <a-tag color="#FFD966" v-else-if="text === 2">中危</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 3">高危</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 'N'">生成整改通知书</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 'Y'">已生成</a-tag>
            <a-tag color="#FE4E50" v-else>严重</a-tag>
          </span>
        </template>
        <!-- 漏洞等级 -->
        <template #severity="{ text }">
          <span>
            <a-tag color="#4687FF" v-if="text === 'Low'">低危</a-tag>
            <a-tag color="#FFD966" v-else-if="text === 'Medium'">中危</a-tag>
            <a-tag color="#FC890C" v-else-if="text === 'High'">高危</a-tag>
            <a-tag color="#FE4E50" v-else>严重</a-tag>
          </span>
        </template>
        <!-- 威胁类型 -->
        <template #vulnType="{ text }">
          <span>
            <a-tag v-if="text === 'Sys'">系统漏洞</a-tag>
            <a-tag v-else-if="text === 'App'">应用漏洞</a-tag>
            <a-tag v-else>漏洞</a-tag>
          </span>
        </template>
        <!-- 操作类型 -->
        <template #operType="{ text }">
          <span>
            <a-tag v-if="text === 'Create'">创建</a-tag>
            <a-tag v-else-if="text === 'Edit'">编辑</a-tag>
            <a-tag v-else-if="text === 'Delete'">删除</a-tag>
            <a-tag v-else-if="text === 'Login'">登录</a-tag>
            <a-tag v-else>其它</a-tag>
          </span>
        </template>
        <!-- 流程状态 -->
        <template #status="{ text }">
          <span>
            <a-tag v-if="text === 'UnReported'">未通报</a-tag>
            <a-tag v-else-if="text === 'Reported'">已通报</a-tag>
            <a-tag v-else-if="text === 'Handled'">已签收</a-tag>
            <a-tag v-else-if="text === 'Uploaded'">已反馈</a-tag>
            <a-tag v-else-if="text === 'Confirmed'">已完成</a-tag>
            <a-tag v-else>漏洞</a-tag>
          </span>
        </template>
        <!-- 创建通报 -->
        <template #isReportGenerated="{record}">
          <span v-if="record.highBugCount>0">
            <a-button type="primary" @click="createReport(record)" v-if="record.isReportGenerated === 'N' && record.vulnOfPendingCount > 0">生成整改通知书</a-button>
            <a-tag color="#9e9e9e" style="padding: 5px 16px;" v-else-if="record.isReportGenerated === 'Y'">已生成整改通知书</a-tag>
           </span>
        </template>
        <!-- 格式時間 -->
        <template #time="{text}">
         {{base.getTime(text)}}
        </template>
        <!-- 檢測中心匹配單位狀態 -->
        <template #inspectionFirmName="{text}">
         <span v-if="text != null"> {{text}}</span>
         <span v-else> 未匹配 </span>
        </template>
        <!-- 手动匹配單位狀態 -->
        <template #isFirmRelatedBtn="{ text }">
         <span v-if="text" v-on:click="getItem({type:text,eventName:'isFirmRelatedBtn'})"> 
           <a-tag color="#FC890C">解除绑定</a-tag>
         </span>
         <span v-else v-on:click="getItem({type:text,eventName:'isFirmRelatedBtn'})"> 
           <a-tag color="#4687FF">绑定企业</a-tag>
          </span>
        </template>
        <!-- 操作 -->
        <template #action="data">
          <span class="action" v-on:click="getTeg(data)">
            <svg focusable="false" style="color:#fff" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M396 512a112 112 0 10224 0 112 112 0 10-224 0zm546.2-25.8C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM508 688c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176z"></path></svg>
          </span>
        </template>
        <!-- 組件 -->
        <template #layers="{record}">
          <div v-for="(item,key) of JSON.parse(record['layer'])" :key='item'>
            <a-tag color="#4687FF" v-if="key === 'application'">应用层</a-tag>
            <a-tag color="#FFD966" v-else-if="key === 'service'">服务层</a-tag>
            <a-tag color="#77ff66" v-else-if="key === 'support'">支撑层</a-tag>
            <a-tag color="#f666ff" v-else-if="key === 'hardware'">硬件层</a-tag>
            <a-tag color="#ffa666" v-else>系统层</a-tag>
             <span v-for="(tool) of item" :key='tool'>
                {{tool.name}},
              </span>
            <!-- {{ data['record']['layer'] }} -->
            <!-- <div v-if="data['record']['layer']['application']">lee</div> -->
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
// import { DownOutlined } from '@ant-design/icons-vue';
import httpRequest from "@/util/httpRequest";
import baseUtil from "@/util/baseUtil";
import { notification } from 'ant-design-vue';

export default {
  name: "Grid",
  props: {
    active: {
      default: 0
    },
    gridDatas: {
      title: String,
      data: Array,
      columns: Array,
      type: String,
      pageData: Object || Boolean,
    }
  },
  data() {
    return {
      base:baseUtil,
      roleId:0
    };
  },
  mounted() {
    if (localStorage.getItem("roleId")) {
      this.roleId = JSON.parse(localStorage.getItem("roleId"));
    }
  },
  methods: {
    getTeg: function(data) {
      this.$emit("getTeg", data.text);
    },
    getItem: function(data) {
      this.$emit("getTeg", data);
    },
    onSelectChange: function(data) {
      console.log("onSelectChange:", data);
      // this.$emit("getTeg", data.text);
    },
    handleTableChange: function(pag,filter,sorter) {
      pag.pageNo = pag.current;
      this.$emit("changePage", pag,filter,sorter);
    },
    createReport:function(data){
      httpRequest.post("创建通报", {firmId:data.id}).then(res => {
        res
         notification.open({
          duration:2,
          message: '操作成功',
          description:'已生成整改通知书，请前往“通报管理”查看'
        })
        data.isReportGenerated = 'Y';
      });
    }
    
  }
};
</script>
<style scoped lang="less">
.bd {
  width: 100%;
  .title {
    padding: 20px 0;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
  }
  .action {
    background: #4687ff;
    border-radius: 4px;
    padding: 5px 5px 2px 5px;
  }
}
.offline {
  text-align: center;
  span {
    border-radius: 180%;
    padding: 5px;
  }
}
</style>
